/** 
	固件版本列表页
*/

import React, { Component } from "react";
import GridTable from '../../components/display/gridTable';
import {
    addInvestor,
    prefixFile,
    investorList,
    userLogin,
    initPassword
} from "../../fetch/fetchApi";
import { Button, Input, Row, Col, Select, Divider, Modal, Form, Upload, Icon, Tooltip } from 'antd';
import ScModal from '../../components/feedback/scModal';
import {DatePicker, message} from "antd/lib/index";
const Option = Select.Option;
const FormItem = Form.Item;
const {TextArea} = Input;
const { RangePicker } = DatePicker;

class InvestorManagment extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            data: [],
            pagination: {},
            replyContent: '',
            params:'',
            exportMes: '导出',
            loading: false,
            visible: false,
            investor:{}
        };
    }

    componentDidMount() {
        this.fetch({
            isNeedInit: true
        });
    }

    init() {
        this.investor={};
        this.query = {
            page: 1,
            pagecount: 10
        };

        this.params = {
            text: '',
            id: '',
            account: '',
            companyName: '',
            certType: '',
            identityNo: '',
            chiefName: '',
            chiefPhone: '',
            chiefAddress: '',
            info: ''

        };
        this.tableColumns = [
            {
                title: '管理账号',
                dataIndex: 'account',
                "key": "account"
            }, {
                title: '企业名称',
                dataIndex: 'companyName',
                "key": "companyName",
                render: (text, record) => (
                    <Tooltip placement="topLeft" title={text} >
                        {text}
                    </Tooltip>)
            }, {
                title: '证件类型',
                dataIndex: 'certTypeInfo',
                "key": "certTypeInfo"
            }, {
                title: '证件号码',
                dataIndex: 'certNo',
                "key": "certNo"
            }, {
                title: '联系人',
                dataIndex: 'chiefName',
                "key": "chiefName",
                className: 'column-nowrap'
            }, {
                title: '联系电话',
                dataIndex: 'chiefPhone',
                "key": "chiefPhone",
                className: 'column-nowrap'
            }, {
                title: '联系地址',
                dataIndex: 'chiefAddress',
                "key": "chiefAddress",
                className: 'column-nowrap',
                render: (text, record) => (
                    <Tooltip placement="topLeft" title={text} >
                        {text}
                    </Tooltip>)
            },  {
                title: '状态',
                dataIndex: 'statusInfo',
                "key": "statusInfo",
                className: 'column-nowrap'
            },{
                title: '创建时间',
                dataIndex: 'createTime',
                "key": "createTime",
                className: 'column-nowrap'
            }, {
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 100,
                render: (text, record) => (
                    <div className="action-wrap">
                        <a href="javascript:void(0);" onClick={() => this.forbidUserLogin(record)}>{record.status === 1 ? "禁用" : "启用"}</a>
                        <Divider type="vertical" />
                        <a href="javascript:void(0);" onClick={() => this.investorUserStatusSave(record)}>修改</a>
                        <Divider type="vertical" />
                        <a href="javascript:void(0);" onClick={() => this.investorInitPassword(record.account)}>重置密码</a>
                        <Divider type="vertical" />
                        <a href="javascript:void(0);" onClick={() => this.openTab({
                            'keyId': `020302${record.key}`,
                            'billUserId': record.key
                        }, {
                            'key': '020302',
                            titleText: '商户列表'
                        })}>下级商户</a>
                    </div>
                )
            }
        ];

    }

    // 打开tab
    openTab(param, e) {
        this.props.onAdd.bind(window.LayoutTab)(e, param);
        this.cancel();
    }

    async forbidUserLogin (record) {

        this.setState({
            confirmLoading: !0
        });
        this.params['id'] = record.key;
        this.params['text'] = record.status;
        try {
            const resData = await userLogin(this.params);
            if (resData.data.code === '200') {
                message.success('操作成功！', 1);
                this.cancel();
                this.queryHandler();
            }
        } catch (e) {
            console.log(e);
        }
    }


    async investorInitPassword (text) {

        this.setState({
            confirmLoading: !0
        });
        this.params['account'] = text;
        try {
            const resData = await initPassword(this.params);
            if (resData.data.code === '200') {
                message.success('重置成功！', 1);
                this.cancel();
                return resData.data.data;
            }
        } catch (e) {
            console.log(e);
        }
    }
    // 打开输入modal
    openInputModal (id, title) {
        this.params['id'] = id;
        this.setState({
            width: 520,
            modalTitle: title,
            modalName: 'input'
        }, () => {
            this.setState({
                modalVisible: !0
            });
        });
    }


    // 打开预览
    openThumbModal (img, title, type) {
        this.openType = type;

        const thumbDom = [];

       thumbDom.push(<div><h3><img src={img} /></h3></div>);

        this.setState({
            width: 620,
            modalTitle: title,
            thumbDom: thumbDom,
            modalName: 'thumbPic'
        }, () => {
            this.setState({
                modalVisible: !0
            });
        });
    }
    showModal = () => {
        this.setState({
            visible: true,
        });
    }


    async findInvestorList() {
        return await investorList(this.query);
    }

    queryHandler = () => {
        this.query["page"] = 1;
        this.fetch();
    }

    investorAccountInputHandler (e) {
        this.query['account'] = e.target.value.toString();
    }


    investorCompanyNameInputHandler (e) {
        this.query['name'] = e.target.value.toString();
    }

    investorStatusInputHandler (e) {
        if (!isNaN(parseInt(e))){
            this.query['isEnable'] = parseInt(e);
        }else{
            this.query['isEnable'] = null;
        }
    }

    accountInputHandler (e) {
        this.params['account'] = e.target.value.toString();
        this.investor.account = e.target.value.toString();
        this.setState({
            investor:this.investor
        })
    }
    companyNameInputHandler (e) {
        this.params['companyName'] = e.target.value.toString();
        this.investor.companyName = e.target.value.toString();
        this.setState({
            investor:this.investor
        })
    }
    certTypeInputHandler (e) {
        console.log(e);
        this.params['certType'] = e.toString();
        this.investor.certType = e.toString();
        this.setState({
            investor:this.investor
        })
    }
    identityNoInputHandler (e) {
        this.params['identityNo'] = e.target.value.toString();
        this.investor.identityNo = e.target.value.toString();
        this.setState({
            investor:this.investor
        })
    }
    chiefNameInputHandler (e) {
        this.params['chiefName'] = e.target.value.toString();
        this.investor.chiefName = e.target.value.toString();
        this.setState({
            investor:this.investor
        })
    }
    chiefPhoneInputHandler (e) {
        this.params['chiefPhone'] = e.target.value.toString();
        this.investor.chiefPhone = e.target.value.toString();
        this.setState({
            investor:this.investor
        })
    }
    chiefAddressInputHandler (e) {
        this.params['chiefAddress'] = e.target.value.toString();
        this.investor.chiefAddress = e.target.value.toString();
        this.setState({
            investor:this.investor
        })
    }
    infoInputHandler (e) {
        this.params['info'] = e.target.value.toString();
        this.investor.info = e.target.value.toString();
        this.setState({
            investor:this.investor
        })
    }
    fetch = (params = {}) => {
        this.setState({
            loading: true
        });
        this.findInvestorList().then((res) => {
            if (!res) {
                return;
            }
            const pagination = this.state.pagination;
            pagination.total = res.data.pageLimit.totalCount;
            pagination.current = params.current || 1;
            if (params.isNeedInit) {
                pagination.onChange = (page, pageSize) => {
                    this.query["page"] = page;
                    this.query["pagecount"] = pageSize;
                    this.fetch({
                        current: page
                    });
                }
            }
            this.setState({
                loading: false,
                data: res.data.data,
                pagination,
            });
        }).catch((ex) => {
            console.log(ex);
        });
    }

    handleOk = (e) => {
        this.setState({
            visible: false,
        });
    }

    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }

    //新建投资人
    addInvestorInfo = () => {
        this.modalParams = {};
        this.investor={};
        this.setState({
            width: 520,
            modalTitle: '投资人添加',
            modalName: 'investorInfo',
            toAccount: '',
            inputAble: false,
        }, () => {
            this.setState({
                modalVisible: !0
            });
        });
    }

    //编辑投资人
    investorUserStatusSave = (record) => {
        record.certType=(record.certTypeInfo === '身份证' ? '2' : '1');
        record.identityNo=record.certNo;
        record.id=record.key;
        this.investor = record;
        this.setState({
            width: 520,
            modalTitle: '编辑投资人',
            modalName: 'investorInfo',
            toAccount: '',
            investor:record,
            inputAble: true
        }, () => {
            this.setState({
                modalVisible: !0
            });
        });
    }

    async subInvestorInfo() {
        this.setState({
            loading: !0
        });
        try {
            const resData = await addInvestor(this.investor);
            if (resData.data.code === '200') {
                message.success('操作成功！', 1);
                this.cancel();
                this.queryHandler();
                this.setState({
                    investor:{}
                });
                this.investor={};
                this.params={};
            }
        } catch ( e ) {
            console.log(e);
        }
    }

    // 数据导出
    async exportData () {

        let excelUrl = prefixFile + '/exportInvestorList.do?';
        let paramUrl = '';
        Object.keys(this.query).map( (key) => {
            paramUrl += key + '=' + this.query[key] + '&';
        });
        // 截取掉最后一个&符号
        if(paramUrl.length > 0){
            paramUrl = paramUrl.substr(0,paramUrl.length - 1)
        }

        window.location.href = excelUrl + paramUrl;
    }



    // 取消弹窗
    cancel () {
        this.setState({
            modalVisible: !1,
            confirmLoading: !1,
            replyContent: ''
        });
        this.queryHandler();
    }

    cancelAddInvestorModal () {
        this.setState({
            modalVisible: !1,
            confirmLoading: !1,
            replyContent: '',
            loading:false,
            investor:{}
        });
    }

    render() {
        const formItemLayout = {
            labelCol: {
                span: 4
            },
            wrapperCol: {
                span: 16,
                offset: 1
            },
        };
        const Content = <div className="sc-page-content">
            <div className="page-toolbar">
                <Row gutter={8}>
                    <Col lg={4} xl={4}>
                        <Input placeholder="管理账号" onChange={this.investorAccountInputHandler.bind(this)}/>
                    </Col>
                    <Col lg={4} xl={4}>
                        <Input placeholder="企业名称" onChange={this.investorCompanyNameInputHandler.bind(this)}/>
                    </Col>
                    <Col lg={4} xl={4} className="whole-fill">
                        <Select placeholder="状态" onChange={this.investorStatusInputHandler.bind(this)}>
                            <Option value="">全部</Option>
                            <Option value="1">启用</Option>
                            <Option value="0">禁用</Option>
                        </Select>
                    </Col>
                    <div  className="button-inlineBlock">
                        <Button type="primary" onClick={this.queryHandler}>查询</Button>
                    </div>
                    <div  className="button-inlineBlock">
                        <Button type="primary" onClick={this.addInvestorInfo}>新建</Button>
                    </div>
                    <div  className="button-inlineBlock">
                        <Button type="primary" icon="download" onClick={this.exportData.bind(this)}>{this.state.exportMes}</Button>
                    </div>
                </Row>
            </div>
            <div className="page-panel">
                <GridTable postyle="table-center" data={this.state.data} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination}/>
            </div>
            {this.state.modalName === 'input' && <ScModal
                width={this.state.width}
                modalVisible={this.state.modalVisible}
                modalTitle={this.state.modalTitle}
                modalContent={(<div className="sc-modal-scroll">
                    <div className={'modal-list'}>
                        <TextArea placeholder="请输入跟进人姓名" value={this.state.replyContent} onChange={this.replyInputHandler.bind(this)}></TextArea>
                    </div>
                </div>)}
                handle = {() => this.addPerson().then(() => this.cancel())}
                confirmLoading={this.state.confirmLoading}
                cancel={this.cancel.bind(this)}
            />}
            {this.state.modalName === 'investorInfo' &&
            <ScModal
                width={this.state.width}
                modalVisible={this.state.modalVisible}
                modalTitle={this.state.modalTitle}
                modalContent={
                    <div className="sc-modal-scroll">
                        <div className="modal-list">
                            <Row gutter={8}>

                                <Col xl={4}>
                                    <label className={'account'}>管理账号:</label>

                                </Col>
                                <Col xl={8}>

                                    <Input disabled={this.state.inputAble} value={this.state.investor.account}
                                           onChange={this.accountInputHandler.bind(this)}></Input>

                                </Col>
                                <Col xl={4}>
                                    <label>(默认密码：123456)</label>

                                </Col>
                            </Row>
                        </div>
                        <div className="modal-list">
                            <Row gutter={8}>
                                <Col xl={4}>
                                    <label className={'companyName'}>企业名称：</label>
                                </Col>
                                <Col xl={8}>
                                    <Input value={this.state.investor.companyName} onChange={this.companyNameInputHandler.bind(this)}></Input>

                                </Col>
                            </Row>
                        </div>
                        <div className="modal-list">
                            <Row gutter={8}>
                                <Col xl={4}>
                                    <label className={'certType'}>证件类型：</label>
                                </Col>
                                <Col lg={8} xl={8} className="whole-fill">
                                    <Select  value={this.state.investor.certType} style={{ width: 152 }} onChange={this.certTypeInputHandler.bind(this)}>
                                        <Option value="1">营业执照</Option>
                                        <Option value="2">身份证号码</Option>
                                    </Select>
                                </Col>
                            </Row>
                        </div>
                        <div className="modal-list">
                            <Row gutter={8}>
                                <Col xl={4}>
                                    <label className={'identityNo'}>证件号码：</label>
                                </Col>
                                <Col xl={8}>
                                    <Input value={this.state.investor.identityNo} onChange={this.identityNoInputHandler.bind(this)}></Input>

                                </Col>
                            </Row>
                        </div>
                        <div className="modal-list">
                            <Row gutter={8}>
                                <Col xl={4}>
                                    <label className={'chiefName'}>联  系 人：</label>
                                </Col>
                                <Col xl={8}>
                                    <Input value={this.state.investor.chiefName} onChange={this.chiefNameInputHandler.bind(this)}></Input>

                                </Col>
                            </Row>
                        </div>
                        <div className="modal-list">
                            <Row gutter={8}>
                                <Col xl={4}>
                                    <label className={'chiefPhone'}>联系电话：</label>
                                </Col>
                                <Col xl={8}>
                                    <Input value={this.state.investor.chiefPhone} onChange={this.chiefPhoneInputHandler.bind(this)}></Input>

                                </Col>
                            </Row>
                        </div>
                        <div className="modal-list">
                            <Row gutter={8}>
                                <Col xl={4}>
                                    <label className={'chiefAddress'}>联系地址：</label>
                                </Col>
                                <Col xl={8}>
                                    <Input value={this.state.investor.chiefAddress} onChange={this.chiefAddressInputHandler.bind(this)}></Input>

                                </Col>
                            </Row>
                        </div>
                        <div className="modal-list">
                            <Row gutter={8}>
                                <Col xl={4}>
                                    <label className={'info'}>备注信息：</label>
                                </Col>
                                <Col xl={8}>
                                    <Input value={this.state.investor.info} onChange={this.infoInputHandler.bind(this)}></Input>

                                </Col>
                            </Row>
                        </div>
                    </div>
                }
                loading={this.state.loading}
                handle={this.subInvestorInfo.bind(this)}
                cancel={this.cancelAddInvestorModal.bind(this)}
            />}
        </div>;

        return Content;
    }
}

 export default InvestorManagment;